<template>
  <div class="page SMSVerification fieldNo">
    <div class="scroll-view">
      <customHeader middleTitle="安全验证" />
      <div class="page-body">
        <p class="text-info">为了保护您的帐号安全，操作前请您进行安全验证，本次验证后120分钟内，进入收款账户管理页面无需再次验证。</p>
        <ul class="form">
          <li>
            <mt-field label="验证码" placeholder="请填写验证码" type="number" v-model="code"></mt-field>
            <div v-if="!waitTime" class="getCode" @click="getCode">获取验证码</div>
            <div v-if="waitTime" class="getCode disabled">{{waitTime+'秒后重发'}}</div>
          </li>
        </ul>
        <div class="btn-wrap">
          <div class="btn" @click="verifyCode" :class="{disabled:!code}">验证</div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox, Field } from "mint-ui";
import jsBridge from "../../tools/jsBridge";
import localStorageClient from "../../js/localstorage.js";
export default {
  data() {
    return {
      code: "",
      waitTime: 0,
      timerId: "",
      params:{
          nextPath:""
      }
    };
  },
  methods: {
    verifyCode: function() {
      const code = this.code;
      if (!/^[0-9]{6}$/.test(code)) {
        Toast("请您输入六位数字验证码");
        return;
      }

      this.ajax({
        url: "/app/wxAccount/verifyCode4WCPay.do?verifyCode=" + code,
        type: "get",
        controlLoading: true
      })
        .then(result => {
          if (result.success.toString() == "true") {
            //将该次短信校验动作加入缓存
            const saveFlag = localStorageClient.save("sms", "1", true);
            //跳转
            this.$router.push({
              path: this.params.nextPath,
              query: this.params
            });
          } else {
            Toast(result.msg);
          }
        })
        .catch(err => {
          Toast("请求失败，请稍候重试");
        });
    },
    getCode: function() {
      if (this.waitTime !== 0) {
        Toast("验证码已发送!");
        return;
      }
      this.ajax({
        url: "/app/wxAccount/sendVerifyCode4WCPay.do",
        type: "get",
        controlLoading: true
      })
        .then(result => {
          if (result.success.toString() == "true") {
            this.waitTime = 60;
            this.reduceTime();
            Toast("发送成功");
          } else {
            Toast(result.msg);
          }
        })
        .catch(err => {
          Toast("验证码发送异常");
        });
    },
    reduceTime: function() {
      if (this.waitTime > 0) {
        this.timerId = setTimeout(() => {
          this.waitTime--;
          this.reduceTime();
        }, 1000);
      } else {
        clearTimeout(this.timerId);
        this.timerId = null;
      }
    }
  },
  created() {
    this.params= this.$route.query;
  },
  destroyed() {
    clearTimeout(this.timerId);
  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "SMSVerification";
</style>
